<template>
    <div class="container">
        <el-select v-model="selectValue" ref="select">
            <el-option
                v-for="item in optionData(cityData)"
                :value="item.value"
                :label="item.label"
                style="display: none"
            >
            </el-option>
            <el-tree
                :data="cityData"
                @node-click="handleNodeClick"
                :props="treeProp"
            ></el-tree>
        </el-select>
        <span>绑定的值：{{ selectValue }}</span>
        <div class="menu-box" v-loading="loading">
            <el-tree
                node-key="id"
                show-checkbox
                :data="menuData"
                ref="menuTree"
                :props="treeMenuProp"
            ></el-tree>
        </div>
    </div>
</template>

<script>
import { defineComponent, ref, nextTick, watch, reactive } from "vue"

export default defineComponent({
    name: "selecttree",
    setup() {
        let cityData = [
            {
                id: 1,
                label: "重庆",
                children: [
                    {
                        id: 2,
                        label: "渝北区",
                    },
                ],
            },
            {
                id: 3,
                label: "北京",
                children: [
                    {
                        id: 4,
                        label: "朝阳区",
                    },
                    {
                        id: 5,
                        label: "海淀区",
                    },
                ],
            },
        ]
        let menuData = ref([])
        let selectValue = ref("")
        let select = ref(null)
        let menuTree = ref(null)
        let loading = ref(false)
        let checkedMenuObj = {} //存储已勾选的数据，按照下拉框的数据分类

        let treeProp = {
            label: function (data, node) {
                return data.label + "_" + data.id
            },
            children: "children",
        }

        let treeMenuProp = {
            label: "label",
            children: "children",
        }

        // 树形结构的数据转为平面数据
        function optionData(arr, result = []) {
            arr.forEach((item) => {
                result.push({ label: item.label, value: item.id })
                if (item.children && item.children.length !== 0) {
                    optionData(item.children, result)
                }
            })
            return JSON.parse(JSON.stringify(result))
        }

        // el-tree点击时的回调
        function handleNodeClick(node, info) {
            if (info.isLeaf) {
                // 切换选项，获取上一次已选的数据
                console.log(menuTree.value.getCheckedKeys(), "已选数据")
                // 赋值
                selectValue.value = node.id
                select.value.blur()
            }
        }

        watch(selectValue, (val) => {
            loading.value = true
            setTimeout(() => {
                if (val === 2) {
                    menuData.value = [
                        {
                            label: "1",
                            id: 1,
                            children: [
                                {
                                    label: "2",
                                    id: 2,
                                    children: [
                                        {
                                            label: "3",
                                            id: 3,
                                        },
                                    ],
                                },
                            ],
                        },
                    ]
                } else if (val === 4) {
                    menuData.value = [
                        {
                            label: "4",
                            id: 4,
                            children: [
                                {
                                    label: "5",
                                    id: 5,
                                    children: [
                                        {
                                            label: "6",
                                            id: 6,
                                        },
                                    ],
                                },
                                {
                                    label: "7",
                                    id: 7,
                                    children: [
                                        {
                                            label: "8",
                                            id: 8,
                                        },
                                    ],
                                },
                            ],
                        },
                    ]
                } else if (val === 5) {
                    menuData.value = [
                        {
                            label: "9",
                            id: 9,
                            children: [
                                {
                                    label: "10",
                                    id: 10,
                                    children: [
                                        {
                                            label: "11",
                                            id: 11,
                                        },
                                    ],
                                },
                                {
                                    label: "12",
                                    id: 12,
                                    children: [
                                        {
                                            label: "13",
                                            id: 13,
                                        },
                                    ],
                                },
                            ],
                        },
                    ]
                }
                loading.value = false
            }, 1000)
        })

        return {
            cityData,
            selectValue,
            optionData,
            handleNodeClick,
            select,
            treeProp,
            treeMenuProp,
            menuData,
            loading,
            menuTree,
        }
    },
})
</script>

<style scoped lang="scss">
.menu-box {
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    margin-top: 50px;
}
</style>
